<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .container{
                width:700px;
                /*height: 600px;*/
                border:1px solid red;
            }
            .d1{
                width:100px;
                height:200px;
                background:red;

                /*设置为向左浮动，该元素就会脱离常规的文档流*/
                float:left;
            }
            .d2{
                width:200px;
                height:200px;
                background:yellow;
                float:left;
            }
            .d3{
                width:300px;
                height:300px;
                background:blue;
                float:right;
            }
            .clear{
                /*清除向左浮动的元素，不允许有向左浮动的元素*/
                /*clear:left;*/
                /*clear:right;*/
                /*clear:both;*/
            }

          /*  设置完浮动后，记得清除浮动
            1.给父元素设置一个固定高度
            2.在浮动元素的后面添加一个空的块标签，设置clear:both*/
        </style>
    </head>
    <body>
        <div class="container">
            <div class="d1"></div>
            <div class="d2"></div>
            <div class="d3"></div>
            <div class="clear"></div>
        </div>
    </body>
</html>